<template>
  <div>
    <div class="email_item_div" v-if="data" @click="to_path(data.link_path,params)">
    <van-row class="email_item">
      <!-- 第一行 头像 -->
      <van-col span="4">
        <div class="img_div">
          <van-badge v-if="count > 0" :content="count">
            <img :src="getImgPath + data.img_path">
          </van-badge>
          <img v-else :src="getImgPath + data.img_path">
        </div>
      </van-col>
      <!-- 第二行信息展示部分 -->
      <van-col span="20">
        <!-- 第一行显示标题 -->
        <van-row class="row1">
          <van-col span="18">
            <span class="font_black">{{data.title}}</span>
          </van-col>
          <van-col span="6" v-if="data.timer">
            <span class="font_gray">{{formatDate(data.timer)}}</span>
          </van-col>
        </van-row>
        <!-- 第二行 显示信息 -->
        <van-row class="row2 message" v-if="message">
          <span class="font_gray message">{{message}}</span>
        </van-row>
      </van-col>
    </van-row>
    </div>
    <slot name="chooes"></slot>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
export default {
  name:"EmailItem",
  props:["data","count","message","params"],
  computed: {
    ...mapGetters("ImgPath",{
      getImgPath:"getImgPath"
    }),
    // 格式化 时间戳
    formatDate(){
      return function(val){
        let now = new Date(val*1000);
        let year=now.getFullYear(); 
        let month=now.getMonth()+1; 
        let date=now.getDate();
        let str = year+"-"+month+"-"+date+"";
        return str;
      }
    }
  },
  methods:{
    // 跳转页面
    to_path(path,parmas){
      if(!path){
        return;
      }else{
        if(parmas){
          this.$router.push({
            path:path,
            query:{
              id:parmas
            }
          });
        }else{
          this.$router.push(path);
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .email_item{
    position: relative;
    z-index: 1;
  }
  .email_item_div{
    position: relative;
    z-index: 2;
    font-size: 0.12rem;
    background-color: #FFF;
    border-top: 0.01rem solid #F6F6F6;
    padding: 0.2rem 0.1rem;
    box-sizing: border-box;
  }
  .img_div{
    width: 0.5rem;
    height: 0.5rem;
    img{
      width: 100%;
    }
    /deep/.van-badge{
      background-color: #E74E4B;
      padding: 0.01rem 0.05rem
    }
  }
  .font_black{
    color: #1e1e1e;
  }
  .font_gray{
    color: #888888;
  }
  .row1{
    margin-top: 0.05rem;
  }
  .row2{
    margin-top: 0.07rem;
  }
  .message{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>